<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拦截器 - url2sql</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css">
<!-- Le styles -->
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
.tools{
  display: none;
  height: 15px;
}
.tools i:hover {
  background-color: rgba(255, 0, 0, .25);
}
.page-header h1 .tools{
  float: right;
}
</style>
<link rel="stylesheet" href="./css/bootstrap-responsive.min.css"
  type="text/css">
  
<script type="text/javascript" src="./js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="./js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>

<body>
<script include='header.html'></script>

  <div class="container-fluid">
    
    <div class="page-header">
      <table class="table table-bordered table-striped" id="table">
        <tr>
          <th>匹配正则</th>
          <th>拦截JS</th>
          <th style="width: 70px;">状态</th>
          <th style="width: 80px;">操作</th>
        </tr>
      </table>
    </div>

	<script type="text/tmpl" id="table-tmpl">
	   <tr>
	    <td>${pathRegex}</td>
	    <td>${js}</td>
	    <td>
			{{if status==1}}
		        <span class="badge badge-success">启用</span>
			{{else}}
		        <span class="badge badge-warning">禁用</span>
			{{/if}}
		</td>
	    <td>
	      <span class="tools" sign="url2sql" _id="${id}">
              <i class="icon-pencil" title="修改"></i>
              <i class="icon-remove" title="删除"></i>
	      </span>
	    </td>
	  </tr>
	</script>

    <hr>
    <footer>
      <p>Say:后端是前端的Mysql.<a class="btn" style="float: right;" id="add">增加</a></p>
    </footer>
  </div>
  
  
  <div class="modal hide" id="deleteDialg">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 sign="title">确定删除</h3>
    </div>
    <div class="modal-body">
      <p sign="content">确定删除吗？</p>
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn">关闭</a>
      <a data-dismiss="modal" sign="ok" class="btn btn-primary">确定</a>
    </div>
  </div><!-- 删除对话框完毕 -->
  
  <div class="modal hide" id="editDialg">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3 sign="title">修改</h3>
    </div>
    <div class="modal-body">
      <div>
          <input sign="pathRegex" class="input-xlarge" name="" style="width:70%" placeholder="拦截路径正则" title="拦截路径正则"/>   
          <span sign="status" class="badge badge-success" style="float: right;">启用</span>
      </div>
      <div>
          <textarea sign="js" class="input-xlarge" name="" style="width:100%;height: 50px;" placeholder="拦截JS" title="拦截JS"></textarea>   
      </div>
    </div>
    <div class="modal-footer">
      <a data-dismiss="modal" class="btn">关闭</a>
      <a sign="ok" class="btn btn-primary">确定</a>
    </div>
  </div><!-- editDialg结束 -->
  
  <!--/.fluid-container-->
  <script type="text/javascript" src="./js/url2sql.js"></script>
  <script type="text/javascript">
 	var callback;
 	(function(){
 		var interceptors = {};
 		callback = function(json){
 			interceptors = json.data;
	 		$('#table-tmpl').tmpl(json.data).appendTo($('#table'));
 		};
 		
  		var getById = function(id){
  			for(var i in interceptors){
  				var t = interceptors[i];
  				if(t.id == id){
  					return t;
  				}
  			}
  		};
 		//删除
 		$('.tools .icon-remove').live('click', function(){
  			var $parent = $(this).parent();
  			var id = $parent.attr('_id');
 			var data = getById(id);
 			Dialg.del(function(){
  				$.getJSON('/root/deleteInterceptor.json?id='+id, function(json){
  					if(json.code==0){
  						$parent.parents('tr').remove();
  					}else{
  						alert('操作失败');
  					}
  				});
  			}, "删除规则:" + data.pathRegex, "删除");
 		});
 		
 		//增加
 		$('#add').click(function(){
 			Dialg.edit(function(json){
 				var url = 'addInterceptor.json'
 				$.ajax({
  					'async' : false,
  					'type' : "post",
  					'url' : url,
  					'data' : json,
  					'dataType' : 'json',
  					'success' : function(json){
  						retVal = true;
  						console.log(json);
  					}
  				});
  				if(!retVal){
  					alert('保存失败');
  				}else{
  					window.location.reload();
  				}
  				return retVal;
 			});
 		});
 		
 		//修改
 		$('.tools .icon-pencil').live('click', function(){
 			var $parent = $(this).parent();
  			var id = $parent.attr('_id');
 			var data = getById(id);
 			
 			Dialg.edit(function(json){
 				var url = 'updateInterceptor.json';
 				json.id = id;
 				$.ajax({
  					'async' : false,
  					'type' : "post",
  					'url' : url,
  					'data' : json,
  					'dataType' : 'json',
  					'success' : function(json){
  						retVal = true;
  						console.log(json);
  					}
  				});
  				if(!retVal){
  					alert('保存失败');
  				}else{
  					window.location.reload();
  				}
  				return retVal;
 			}, data);
 		});
 		
 	})();
  </script>
</body>
</html>
